/*
  运单列表7
*/
<template>
  <div class="app-page">
    <!-- 操作菜单区 -->
    <my-header>
      <el-input
        placeholder="请输入订单号"
        suffix-icon="el-icon-search"
        style="width: 150px;margin-right: 10px"
        size="mini"
        clearable
        @change="getOrderInfo"
        v-model="searchCode">
      </el-input>
      <el-button @click="getExcel">导出运单</el-button>
      <el-button @click="getOTemplate">模板下载</el-button>
      <el-button @click="getOrderInfo"  v-repeatClick>刷新</el-button>
      <el-upload
        class="upload-demo"
        :action="addOrderInfo()"
        name='uploadExcelFile'
      >
        <el-button type="primary">批量添加运单</el-button>
      </el-upload>
      <!-- <el-button type="danger">删除</el-button> -->
      <!-- <el-button type="primary" @click="upload">批量添加运单</el-button>
      <input id='file' type="file" v-show='false'> -->
    </my-header>

    <!-- 搜索区 -->

    <!-- 列表区 -->
    <div style="flex: 1">
      <el-card>
        <el-table height="100%" :data="data" border >
        <!-- <el-table-column type="selection" width="55"> </el-table-column> -->
        <el-table-column type="index" width="55" align="center">
        </el-table-column>
        <el-table-column
          prop="orderCode"
          label="运单号"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="courierCompany"
          label="快递公司"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="courierOrderCode"
          label="快递单号"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="orderStatus"
          label="运单状态"
          align="center"
        >
        <!-- <template slot-scope="scope">
          <el-select v-model="scope.row.orderStatus" @change="handleChange()"></el-select>
        </template> -->
        </el-table-column>
        <el-table-column
          prop="statusUpdateTime"
          width="200"
          label="运单状态更新时间"
          align="center"
          sortable
        ></el-table-column>
        <el-table-column
          prop="createTime"
          label="运单创建时间"
          width="200"
          align="center"
          sortable
        ></el-table-column>
      </el-table>
      </el-card>
    </div>

    <!-- 分页区 -->
    <div style="margin-top: 10px">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[20, 50, 100, 200, 500, 1000]"
        :page-size="pageSize"
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>

  </div>
</template>

<script>
import myHeader from "@/components/pageHEader/pageHeader";
let input
import { dateFormat } from "@/utils";
import { getOrderInfo, getOTemplate, getExcel ,addOrderInfo} from "@/api/business/waybill";


export default {
  name: "parcel",
  components: {
    myHeader,
  },
  data() {
    return {
      pageSize: 20,
      currentPage: 1,
      data: [],
      total: 0,
      statusList:[
        {
          label:'处理中',
          id:''
        },
        {
          label:'已发货',
          id:''
        },
        {
          label:'清关中',
          id:''
        },
        {
          label:'抽检中',
          id:''
        },
        {
          label:'国内派送中',
          id:''
        }
      ],
      searchCode:'',
    };
  },
  created() {
    this.getOrderInfo();
  },
  mounted(){
    // input = document.getElementById('file')
    // input.addEventListener('change',()=>{
    //   debugger
    //   let form = new FormData()
    //   form.append('uploadExcelFile',input.FileList[0])
    //   console.log(form)
    // })
  },
  methods: {
    handleSizeChange(val) {
      this.pageSize = val;
      this.getOrderInfo();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getOrderInfo();
    },
    //查询运单
    getOrderInfo() {
      let query = {
        pageNum: this.currentPage,
        pageSize: this.pageSize,
      };
      if(this.searchCode){
        query.orderCode = this.searchCode
      }
      getOrderInfo(query).then((resp) => {
        this.data = resp.data.records;
        this.total = resp.data.total;
      }).catch(e=>{
        this.data = []
      });
    },
    //导出运单
    getExcel() {
      this.download(getExcel())
    },
    //下载模板
    getOTemplate() {
      this.download(getOTemplate())
    },
    //批量添加运单
    addOrderInfo(){
      return addOrderInfo()
    },
    //上传
    upload(){
      input.FileList = []
      input.click()
    },
    handleChange(){}
  },

};
</script>

<style scoped lang='scss'>
.cell-item {
  line-height: 30px;
}
.upload-demo{
  display: inline-block;
  margin-left:10px
}
</style>
